<template>
  <div class="card" style="margin-bottom: 10px;">
    <div class="cardbody">
      <div class="row">
        <div class=" shop col">My订单</div>
      </div>
    </div>
  </div>

  <div v-for="order in $store.state.orders" :key="order.id">
    <div class="card">
      <div class="card-body">
        <div class="row">
          <div class="col">
            <div>{{ order.name }}</div>
          </div>

          <div class="col">
            <div>{{ order.orderprice }}￥</div>
          </div>


        </div>

        <div class="row">
          <div class="col" style="font-weight: lighter;">
            创建时间:{{ order.createtime }}
          </div>
        </div>

        <div class="row">
          <div class="col" style="font-weight: lighter;">
            结束时间:{{ order.completetime }}
          </div>
        </div>
      </div>

      <div class="col">
        <button type="button" class="btn btn-warning" v-if="!order.ack" @click="order_ack(order.id)">确认</button>
        <button type="button" class="btn btn-warning" v-else @click="order_delete(order.id)">删除</button>

        <!-- <button  v-if="!order.ack" @click="order_ack(order.id)">确认</button>
              <button  v-else @click="order_delete(order.id)">删除</button> -->
      </div>

    </div>

  </div>
</template>

<script>
import { useStore } from 'vuex';
export default {
  components: {

  },

  setup() {
    let store = useStore();
    const order_ack = (orderid) => {
      let date = new Date();
      let completetime = date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日" + date.getHours() + "时" + date.getMinutes() + "分" + date.getSeconds() + "秒";
      for (let i in store.state.orders) {
        if (orderid === store.state.orders[i].id) {
          store.state.orders[i].completetime = completetime;
          store.state.orders[i].ack = true;
        }
      }
      store.dispatch("orderack", {
        orderid: orderid,
        completetime: completetime,
      })
    };

    const order_delete = (orderid) => {
      for (let i in store.state.orders) {
        if (orderid === store.state.orders[i].id) {
          store.state.orders.splice(i, 1);
        }
      }
      store.dispatch("orderdelete", {
        orderid: orderid,
      })
    }
    return { order_ack, order_delete };
  }
}
</script>

<style scoped>
.shop {

  font-size: large;
  font-weight: bolder;
}

.col {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('https://img.zcool.cn/community/01a26b55443ba00000019ae9f94b3c.jpg@2o.jpg');
}

img {
  height: 90%;
  width: 20%;
}
</style>